<template>
  <div>
    <h1>Parent</h1>
    <Child>
    <template v-slot:link>
      <a href="###">hello</a>
    </template>

    <template #content>
      <h1>hello</h1>
    </template>
    </Child>


    <Child :persons='persons'>
    <template #personMessage='{person}'>
      <span :style="{ background: person.age > 18 ? 'red' : 'pink' }">
          {{ person.name }}--{{ person.age }}
        </span>
    </template>
    </Child>



  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Parent",
  components: {
    Child,
  },
  data() {
    return {
      persons: [
        { id: "001", name: "李博", age: 30 },
        { id: "002", name: "red青", age: 14 },
        { id: "003", name: "(个_个)", age: 24 },
        { id: "004", name: "lucy", age: 55 },
        { id: "005", name: "lily", age: 4 },
        { id: "006", name: "liming", age: 19 },
      ],
    };
  },
};
</script>

<style>
</style>